<template>
	<view class="lh-container">
		<img-top :imgSrc="'/static/lh/pay/top.png'"></img-top>
		<view class="form-container">
			<uni-forms class="forms-item" ref="accountForm" :model="formData">
				<uni-forms-item>
					<input
						style="width: 600rpx"
						maxlength="11"
						placeholder="请输入手机号"
						type="tel"
						v-model="formData.mobile"
						class="uni-input-input"
						placeholder-style="color: #969696;font-size:40rpx"
					/>
				</uni-forms-item>

				<view class="login-btn" style="text-align: center">
					<image src="/static/lh/pay/btn.png" mode="widthFix" style="width: 600rpx" @click="submitform"></image>
				</view>
				<view style="margin-top: 20rpx; margin-bottom: 0rpx; padding-bottom: 0rpx; display: flex">
					<checkbox-group @change="changeAll">
						<label>
							<checkbox value="cb" :checked="allChecked" style="transform: scale(0.7)" />
							<text style="color: #ffffff; font-weight: 400; font-size: 24rpx">已阅读并同意</text>
						</label>
					</checkbox-group>
					<text style="color: #fffcb0; font-weight: 600" @click="privatePro(1)">《隐私政策》</text>
					<text style="color: #fffcb0; font-weight: 600" @click="privatePro(2524)">《产品说明》</text>
				</view>
			</uni-forms>
		</view>

		<img-top :imgSrc="'/static/lh/pay/bottom.png'"></img-top>
		<uni-popup ref="popupOk" type="bottom" border-radius="10px 10px 0 0">
			<per-info :agreementType="agreeType" @ok="ok1"></per-info>
		</uni-popup>
		<view class="arrive-btn" :style="{ display: showHeight > 500 ? '' : 'none' }">
			<image src="/static/lh/pay/btn.png" mode="widthFix" style="height:140rpx; 600rpx" @click="toTop"></image>
		</view>
		<view class="fixed-phone" @click="phone">
			<image src="/static/lh/phone.png" style="width: 60rpx" mode="widthFix"></image>
		</view>
		<view class="fixed-active" @click="privatePro(119)">
			<image src="/static/lh/rule.png" style="width: 60rpx" mode="widthFix"></image>
		</view>
		<view class="fixed-link" @click="goLink">
			<image src="/static/lh/link.png" style="width: 60rpx" mode="widthFix"></image>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, watchEffect, watch } from 'vue';
import { onLoad, onPageScroll, onReady } from '@dcloudio/uni-app';
import initApi from '@/apis/init.js';
import perInfoVue from '../../components/per-info/per-info.vue';
const accountForm = ref();
// 表单数据
const showHeight = ref(0);
const isSend = ref(false);
const allChecked = ref(false);
const popupOk = ref();
const isNum = ref(0);
const isTimer = ref();
const agree = ref('同意');
const agreeType = ref(1);
const formData = reactive({
	mobile: '',
	smsCode: null,
	orderNo: null,
	channelCode: '',
	productCode: ''
});

const changeAll = (val) => {
	if (val.detail.value.length > 0) {
		allChecked.value = true;
	} else {
		allChecked.value = false;
	}
};
const phone = () => {
	uni.makePhoneCall({
		phoneNumber: '400-8825101' //客服
	});
};
const goLink = () => {
	console.log('去哪里');
};
watch(
	() => formData.mobile,
	(newVal, oldValue) => {
		const isOkMobile = /^1[3-9][0-9]\d{8}$/.test(newVal);
		if (isOkMobile) {
			uni.hideKeyboard();
		}
	}
);

/* 发送订单 */
const submitform = async () => {
	try {
		if (!allChecked.value) return uni.utils.toast('请勾选《隐私协议》');
		if (!formData.mobile) return uni.utils.toast('请输入手机号');
		
		const arr = {
			orderNo: formData.orderNo,
			mobile: formData.mobile,
			smsCode: formData.smsCode
		};
		
/* 		const res = await initApi.processInventoryPackageOrder(arr);
		if (res.code != 20000) return uni.utils.toast(res.message); */
		
		
		
		clearInterval(isTimer.value);
		isNum.value = 0;
		isSend.value = false;
	} catch (e) {
		//TODO handle the exception
		console.log(e);
		clearInterval(isTimer.value);
		isNum.value = 0;
		isSend.value = false;
		return uni.utils.toast('订单订购失败');
	}
};

onLoad((query) => {
	// if (!query.a || !query.p) {
	// 	uni.reLaunch({
	// 		url: '/pages/clb/404'
	// 	});
	// }
	formData.channelCode = query.a;
	formData.productCode = query.p;
});
const toTop = () => {
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 300
	});
};
onPageScroll((e) => {
	showHeight.value = e.scrollTop;
});

const ok1 = () => {
	popupOk.value.close();
	allChecked.value = true;
};
const privatePro = (type) => {
	agreeType.value = type;
	popupOk.value.open('center');
};
</script>

<style lang="scss" scoped>
.form-container {
	width: 750rpx;
	margin: 0 auto;
	// background-color: #3d4ca6;
	background: linear-gradient(to right, #3d4ca6, #2e3a8b);
	box-sizing: border-box;
	overflow-x: hidden;
	.forms-item {
		width: 600rpx;
		margin: 0 auto;
	}
	.login-btn {
		animation: scaleUp 2.5s infinite; /* 动画名称、持续时间、是否无限循环 */
	}
	@keyframes scaleUp {
		0%,
		50% {
			transform: scale(1); /* 开始时的缩放比例 */
		}
		25%,
		75% {
			transform: scale(1.05); /* 缩放比例最大值 */
		}
		100% {
			transform: scale(1); /* 结束时的缩放比例 */
		}
	}
	.uni-forms-item {
		height: 100rpx;
		margin-bottom: 20 !important;
		border-bottom: 2rpx solid #eee;
		background-color: #ffffff;
		border-radius: 100rpx;
		box-sizing: border-box;
		.uni-input-input {
			width: 600rpx;
			margin-left: 50rpx;
			font-size: 34rpx;
		}
	}
}
.lh-container {
	width: 750rpx;
	margin: 0 auto;
	// background-color: #3d4ca6;
	background: linear-gradient(to right, #3d4ca6, #2e3a8b);
	overflow: hidden;
	box-sizing: border-box;
}

:deep(.uni-checkbox-input) {
	border-radius: 80rpx !important;
}
.fixed-phone {
	position: absolute;
	top: 300rpx;
	right: 0rpx;
}
.fixed-active {
	position: absolute;
	top: 150rpx;
	right: 0rpx;
}
.fixed-link {
	position: absolute;
	top: 450rpx;
	right: 0rpx;
}
.arrive-btn {
	position: fixed;
	bottom: 20rpx;
	width: 750rpx;
	text-align: center;
}
</style>
